WSL2上にTypeScript、React、Next.jsを使うための環境を構築してみた

こんにちは、ゲームソリューション部のsoraです。
今回は、WSL2上にTypeScript、React、Next.jsを使うための環境を構築してみたことについて書いていきます。

環境

Windows 11 Pro
Ubuntu 22.04.3 LTS

WSL2有効化やUbuntuのインストールは説明しません。

Node.jsのインストール

まずは実行環境であるNode.jsをインストールします。
普通にインストールしようとすると、最新バージョンや最新のLTSバージョンがインストールされなかったため、Node.jsのバージョン管理ツールの n をインストールしました。

# nodeのインストール
$ sudo apt install nodejs
# 最新バージョンはv21.x、最新のLTSバージョンは20.10.0なのに、古いバージョンがインストールされている
$ node -v
v10.19.0
$ npm -v
6.14.4

# 最新のLTS版をインストールしたいため、nodeのバージョン管理ツール n からインストールする
# バージョン管理ツール n のインストール
$ sudo npm install -g n
$ n -V
v9.2.0
# とりあえずコマンドの確認
$ n -h

# ダウンロード可能なnodeのバージョン確認
$ n ls-remote
Listing remote... Displaying 20 matches (use --all to see all).
21.4.0
…
21.0.0
20.10.0
…
20.0.0

# LTS版の確認
$ n --lts
20.10.0
# LTS版を指定してインストール
$ sudo n lts
# (もしくはバージョン指定してインストールすることも可能)
# $ sudo n install 20.10.0

# n でnodeがインストールされていることの確認
$ n ls
node/20.10.0
# nodeのバージョンを確認してみると変わっていない
$ node -v
v10.19.0

# プロファイルを更新する
# ※ .bash_profileがある人は.bash_profileにするのだと思います
$ echo 'export PATH=$HOME/bin:$PATH' >> ~/.profile
$ source ~/.profile
# nodeのバージョンを確認してみると、バージョンが変わっている
$ node -v
v20.10.0
# npmも紐づいて変わっている
$ npm -v
10.2.3

TypeScriptコンパイラのインストール

次にTypeScriptをJavaScriptにトランスコンパイルするためのツールを入れます。

$ sudo npm install -g typescript
$ tsc -v
Version 5.3.3

プロジェクト作成

環境準備ができたため、ReactとNext.jsのプロジェクトを作成してみます。

Reactプロジェクト作成

# ReactのTypescriptのテンプレートを作成
# npxのため、足りていないパッケージがあればインストールするかを聞いてくれる
$ npx create-react-app my-app --template typescript
Need to install the following packages:
create-react-app@5.0.1
Ok to proceed? (y) y
$ cd my-app
$ npm start
# http://localhost:3000/でサーバが起動（自動でページが表示される）

Reactの画面が表示されました。

Nextプロジェクト作成

# NextのTypescriptのテンプレートを作成
$ npx create-next-app --typescript
Need to install the following packages:
create-next-app@14.0.4
Ok to proceed? (y) y
✔ What is your project named? … my-app
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
✔ What import alias would you like configured? … @/*
$ cd my-app
$ npm run dev
# http://localhost:3000/でサーバが起動

Next.jsの画面が表示されました。

参考にしたページ

Nodeバージョン管理ツール「n」でバージョンが切り替わらない
Nodeバージョン管理ツール「n」でバージョンが切り替わらないときの対処法【パスを確認】

最後に

今回は、WSL2上にTypeScript、React、Next.jsを使うための環境を構築してみたことを記事にしました。
どなたかの参考になると幸いです。